<template>
<!--  计算记录详情-->
  <div class="total">
    <keep-alive>
      <div v-if="waitFinished" class="result">
        <!--   spss结果展示-->
        <div class="spss">
          <!--     分析流程-->
          <div class="analyze_process">
            <div class="totaltitle">
              <div class="blue-rectangle"></div>
              <h1>分析流程</h1>
            </div>
            <div class="processcontent">
              <!--     模型配置-->
              <div class="title_1">
                <img
                    src="../../assets/caculate-detail-icons/数据源配置.png"
                    alt=""
                />
                <h1>模型配置</h1>
              </div>
              <div class="arrow">
                <img
                    src="../../assets/caculate-detail-icons/下箭头1.png"
                    alt=""
                />
                <div class="algorithmconfigure">
                  <div>模型名称：{{ this.caculate_info.model_name }}</div>
                  <div>
                    模型类别：<span
                      @click="toPageCaculate"
                      style="
                      color: #409eff;
                      text-decoration: underline;
                      cursor: pointer;
                    "
                  >{{ this.caculate_info.model_type }}
                  </span>
                  </div>
                  <div>
                    计算类型：<span>{{ this.caculate_info.GroupsOrOne }} </span>
                  </div>
                  <!--                <div>参数：{{this.config.parameter}}</div>-->
                </div>
              </div>

              <!--     参数输入-->
              <div class="title_1">
                <img src="../../assets/caculate-detail-icons/数据源.png" alt="" />
                <h1>参数输入</h1>
              </div>
              <div class="arrow">
                <img
                    src="../../assets/caculate-detail-icons/下箭头1.png"
                    alt=""
                />
                <div class="datasource">
                  <div class="datafilename">
                    <el-table :data="param_table" style="width: 100%">
                      <el-table-column
                          prop="parameter"
                          label="参数"
                      ></el-table-column>
                      <el-table-column
                          prop="inputValue"
                          label="输入值"
                      ></el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <!--     分析结果-->
              <div class="title_1">
                <img
                    src="../../assets/caculate-detail-icons/分析结果.png"
                    alt=""
                />
                <h1>分析结果</h1>
              </div>
              <div class="analyzeresults">
                <!--              <div>季节性AIMA棋型用于预则具有周期性、季节性的时间序列]。模型的拟合优度R为0.897，模型表现优秀，未来12期预测结果分别为25.097、290.092、295.087、300.082、305078、310.073-->
                <!--                315.068、320.064、325.059、330.054.-->
                <!--                340.045。未来12期预测结果分别为285.097、290.092、295.087、300.082、305.078、310.073、315.068、320.064、325.059、330.054、335.05、340.045,-->
                <!--              </div>-->
              </div>
            </div>
          </div>
        </div>

        <div class="analyze_process mt50" v-if="isRevolve&&GroupsOrOne === '单组计算'">
          <div class="totaltitle">
            <div class="blue-rectangle"></div>
            <h1 >物质组成</h1>
          </div>
          <div  class="ssp" >
            <div  v-if="caculateResult.Compose.data.judge ==='Yes'">
          <span class="MaterialComposition">溶液中铀浓度达到出料要求时溶解液中的物质有硝酸和硝酸酰铀，此时物质组成如下:
          </span>
              <Resolve_Table class="r_table" :Compose="caculateResult.Compose.data"></Resolve_Table>
            </div>
            <div v-else>
          <span >铀浓度没达到出料要求，不显示物质组成
          </span>
            </div>
          </div>
        </div>




        <div v-if="GroupsOrOne === '单组计算'">
          <!--      详细结论-->
          <div class="detailed_conclusions">
            <div class="totaltitle totaltitle1">
              <div class="blue-rectangle"></div>
              <h1>详细结论</h1>
            </div>
            <div class="conclusioncontent">
              <div class="titled1">
              <span style="font-weight: bold"
              >输出结果1：图10溶解液出口处铀浓度变化</span
              >
              </div>

              <div class="map-bt flex flex-column">
                <!--              <RandomSequenceChart ></RandomSequenceChart>-->
                <SingleChart10
                    v-if="waitFinished"
                    :caculateResult="caculateResult"
                ></SingleChart10>
                <button @click="getExcelFile(0)" >导出Excel</button>

              </div>

              <div class="">
                <span style="font-weight: bold">图表说明</span>
              </div>
              <div class="stepscontent">
                <div >
                  <div>
                    1、该图代表在单一模型中铀浓度随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中铀浓度，单位为g/L。
                  </div>
                  <div>
                    2、溶液中铀浓度初始为0
                    g/L，随着反应的进行，溶液中铀浓度逐渐增大。
                  </div>

                </div>
              </div>
            </div>

            <div class="conclusioncontent">
              <div class="titled1">
              <span style="font-weight: bold"
              >输出结果2：图11溶解液出口处硝酸浓度变化</span
              >
              </div>

              <div class="map-bt flex flex-column">
                <!--              <RandomSequenceChart ></RandomSequenceChart>-->
                <SingleChart11
                    v-if="waitFinished"
                    :caculateResult="caculateResult"
                ></SingleChart11>
                <button @click="getExcelFile(1)" >导出Excel</button>

              </div>

              <div class="">
                <span style="font-weight: bold">图表说明</span>
              </div>
              <div class="stepscontent">
                <div>
                  <div>
                    1、该图代表在单一模型中硝酸浓度随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中硝酸浓度，单位为mol/L。
                  </div>
                  <div>2、随着反应的进行，溶液中硝酸浓度逐渐减小。</div>

                  <!--                <div>2、溶液中硝酸初始浓度为（<span>{{this.caculate_info.paramValues.c_H}}mol/L</span>），加入的芯块质量为（<span>{{this.caculate_info.paramValues.w0}}kg</span>），随着反应的进行，溶液中硝酸浓度逐渐减小。</div>-->
                  <!--                <div>●季节性数据:季节性成分在时间，方向和幅度方面表现出重复的趋势。比如说每年夏季、冬季用电会比春季秋季多。</div>-->
                  <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
                </div>
              </div>
            </div>

            <div class="conclusioncontent">
              <div class="titled1">
              <span style="font-weight: bold"
              >输出结果3：图12溶解过程氮氧化物生成速率变化</span
              >
              </div>

              <div class="map-bt flex flex-column">
                <!--              <RandomSequenceChart ></RandomSequenceChart>-->
                <SingleChart12
                    v-if="waitFinished"
                    :caculateResult="caculateResult"
                ></SingleChart12>
                <button @click="getExcelFile(2)" >导出Excel</button>

              </div>

              <div class="">
                <span style="font-weight: bold">图表说明</span>
              </div>
              <div class="stepscontent">
                <div>
                  <div>
                    1、该图代表在单一模型中氮氧化物生成速率随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中氮氧化物生成速率，单位为mol/min。
                  </div>
                  <div>
                    2、在该溶解反应中，每3mol硝酸与1mol二氧化铀反应，可以生成0.5mol的一氧化氮和0.5mol的二氧化氮，生成的氮氧化物就是一氧化氮和二氧化氮。
                  </div>
                  <div>
                    3、反应开始阶段，由于容器中硝酸浓度处于最高值，反应速率最快，随着反应的进行，反应速率逐渐减小。
                  </div>
                  <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
                </div>
              </div>
            </div>

            <div class="conclusioncontent">
              <div class="titled1">
              <span style="font-weight: bold"
              >输出结果4：图14-1不同温度下铀浓度变化</span
              >
              </div>

              <div class="map-bt flex flex-column">
                <!--              <RandomSequenceChart ></RandomSequenceChart>-->
                <SingleChart14U
                    v-if="waitFinished"
                    :caculateResult="caculateResult"
                ></SingleChart14U>
                <button @click="getExcelFile(3)" >导出Excel</button>

              </div>

              <div class="">
                <span style="font-weight: bold">图表说明</span>
              </div>
              <div class="stepscontent">
                <div>
                  <div>
                    1、该图代表在单一模型中不同温度下铀浓度随时间变化的曲线，其中温度分别为（<span
                  >{{ this.caculate_info.paramValues.temp_list }}℃</span
                  >）。图像横坐标是时间，单位为min;纵坐标为溶解器中铀浓度，单位为g/L。
                  </div>
                  <div>
                    2、不同温度下溶解反应的速率不同。温度越高，反应速率越快，溶液中铀浓度增加速率越大；温度越低，反应速率越慢，溶液中铀浓度增加速率越小。
                  </div>
                  <!--                <div>●季节性数据:季节性成分在时间，方向和幅度方面表现出重复的趋势。比如说每年夏季、冬季用电会比春季秋季多。</div>-->
                  <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
                </div>
              </div>
            </div>

            <div class="conclusioncontent">
              <div class="titled1">
              <span style="font-weight: bold"
              >输出结果5：图14-2不同温度下硝酸浓度变化</span
              >
              </div>

              <div class="map-bt flex flex-column">
                <!--              <RandomSequenceChart ></RandomSequenceChart>-->
                <SingleChart14N
                    v-if="waitFinished"
                    :caculateResult="caculateResult"
                ></SingleChart14N>
                <button @click="getExcelFile(4)" >导出Excel</button>

              </div>

              <div class="">
                <span style="font-weight: bold">图表说明</span>
              </div>
              <div class="stepscontent">
                <div>
                  <div>
                    1、该图代表在单一模型中不同温度下硝酸浓度随时间变化的曲线，其中温度分别为（<span
                  >{{ this.caculate_info.paramValues.temp_list }}℃</span
                  >）。图像横坐标是时间，单位为min;纵坐标为溶解器中硝酸浓度，单位为mol/L。
                  </div>
                  <div>
                    2、不同温度下溶解反应的速率不同。温度越高，反应速率越快，溶液中硝酸消耗速率越大；温度越低，反应速率越慢，溶液中硝酸消耗速率越小。
                  </div>
                  <!--                <div>●季节性数据:季节性成分在时间，方向和幅度方面表现出重复的趋势。比如说每年夏季、冬季用电会比春季秋季多。</div>-->
                  <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
                </div>
              </div>
            </div>

            <div v-if="isRevolve" class="conclusioncontent">
              <div class="titled1">
              <span style="font-weight: bold"
              >输出结果6：图15不同温度下铀浓度达到标准所需时间</span
              >
              </div>

              <div class="map-bt flex flex-column">
                <RevolveChart15
                    :caculateResult="caculateResult"
                ></RevolveChart15>
                <button @click="getExcelFile(5)" >导出Excel</button>
              </div>

              <div class="">
                <span style="font-weight: bold">图表说明</span>
              </div>
              <div class="stepscontent">
                <div>
                  <div>
                    1、该图代表在回转模型中不同温度下铀浓度达到标准所需要的时间，其中温度分别为（<span
                  >{{ this.caculate_info.paramValues.temp_list }}℃</span
                  >）。图像横坐标温度;纵坐标为在该温度下铀浓度达到标准所需时间，单位为min。
                  </div>
                  <div>
                    2、不同温度下，溶解反应的速率不同，铀浓度达到标准所需要的时间也不同。在该回转模型中，要想达到出料要求，溶液中铀浓度应该在250到300
                    g/L之间。
                  </div>
                  <!--                <div>●季节性数据:季节性成分在时间，方向和幅度方面表现出重复的趋势。比如说每年夏季、冬季用电会比春季秋季多。</div>-->
                  <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="GroupsOrOne === '多组计算'" class="single-table1">
          <el-table
              :data="VtableData"
              style="width: 100%"
              :cell-style="{ 'text-align': 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="attribute" label="Attribute"></el-table-column>
            <el-table-column prop="values" label="Values">
              <template #default="scope">
                <el-select
                    v-if="!isSwitchOn[scope.row.attribute]"
                    v-model="selectedValue[scope.row.attribute]"
                >
                  <el-option
                      v-for="value in scope.row.values"
                      :key="value"
                      :label="value"
                      :value="value"
                  ></el-option>
                </el-select>
                <el-label v-else>{{ scope.row.values.join(", ") }}</el-label>
              </template>
            </el-table-column>
            <el-table-column label="设置变量">
              <template #default="scope">
                <el-switch
                    v-model="isSwitchOn[scope.row.attribute]"
                    active-text="On"
                    inactive-text="Off"
                    @change="handleSwitchChange(scope.row.attribute)"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="validateData">显示结果</el-button>

          <div v-if="show_map">
            <div
                v-if="isRevolve"
                class="analyze_process mt50 pb50">
              <div class="totaltitle">
                <div class="blue-rectangle"></div>
                <h1 >物质组成</h1>
              </div>
              <div  class="ssp" >

                <k-tab @clickUpdata="clickUpdata" v-model="activeIndex" :Argument="Argument"  :tabs-data="Legend" />
                <div v-if="resolve_compose">
                  <div  v-if="ComposeGroup[activeIndex].data.judge ==='Yes'">
                      <span class="MaterialComposition">溶液中铀浓度达到出料要求时溶解液中的物质有硝酸和硝酸酰铀，此时物质组成如下:
                      </span>
                    <Resolve_Table class="r_table" :Compose="ComposeGroup[activeIndex].data"></Resolve_Table>
                  </div>
                  <div v-else>
                      <span >铀浓度没达到出料要求，不显示物质组成
                      </span>
                  </div>
                </div>
              </div>
            </div>

            <Caculate_Groups
                :params="E_params"
                :variable = nullKey
                :baseUrl="baseUrl"
                :ObjectId="totalResult._id"
                :showExport="false"
                :Legend="Legend"
                :Argument="Argument"
                :Ur_generation="Ur_generation"
                :NOx_generation="NOx_generation"
                :Nitric_acid_concentration="Nitric_acid_concentration"
                :diffTempAcid="diffTempAcid"
                :diffTempUranium="diffTempUranium"
                :UrTo_standardTime = "UrTo_standardTime"

            />
          </div>
        </div>

        <div class="functionbutton">
          <el-button style="" type="" @click="goBack">返回</el-button>
          <!-- 添加返回按钮 -->
          <el-button v-if="GroupsOrOne === '单组计算'" style="" @click="useParam">使用</el-button>
          <el-button @click="exportJson" style=""><a>导出</a></el-button>
        </div>
      </div>

    </keep-alive>

    <div v-if="!waitFinished && !this.noResult" class="loading">
      <label>正在查询中.............已等待{{ waitTime }}秒</label>
    </div>

    <div v-if="this.noResult && !this.waitFinished" class="error">
      <!--      <label>{{ this.errorText }}</label>-->
      <img src="../../assets/caculate-detail-icons/加载失败.png" />
    </div>
  </div>
</template>

<script>
// import router from "@/router";
import SingleChart12 from "@/views/dissolutionratechart/singlechart/SingleChart12";
import SingleChart10 from "@/views/dissolutionratechart/singlechart/SingleChart10";
import SingleChart11 from "@/views/dissolutionratechart/singlechart/SingleChart11";
import SingleChart14U from "@/views/dissolutionratechart/singlechart/SingleChart14-U";
import SingleChart14N from "@/views/dissolutionratechart/singlechart/SingleChart14-N";
import RevolveChart15 from "@/views/dissolutionratechart/revolvechart/RevolveChart15";
import { dayjs } from "element-plus";
import Caculate_Groups from "@/views/caculate_detail/Caculate_Groups";
import Resolve_Table from "@/views/caculate_detail/Resolve_Table";
import KTab from "@/components/Tabs";
// import RandomSequenceChart from "@/components/dissolutionratechart/RandomSequenceChart";

export default {
  props: {
    selected_row: {
      type: Object,
      default: function () {
        return {};
      },
    },
    baseUrl: {
      type: String,
    },
  },
  watch:{
    activeIndex(newValue){
      if(newValue){
        console.log("外面activeIndex新值");
        console.log(this.activeIndex)
      }
    }
  },

  components: {
    KTab,
    Resolve_Table,
    Caculate_Groups,
    SingleChart14N,
    SingleChart14U,
    SingleChart10,
    SingleChart11,
    SingleChart12,
    RevolveChart15,
    // RandomSequenceChart,
  },
  data() {
    return {
      resolve_compose:true,
      ComposeGroup:[],
      activeIndex :0,
      GroupsOrOne:"多组计算",
      jsonData: [],
      VtableData: [],
      // 检验数据的变量
      validationResults: {
        switchNotOn: [],
        selectNotSelected: [],
      },
      // data: [{"aw": [0.05, 0.04], "p": [0.5, 0.4], "k": [75000000], "E": [7000, 7600], "T": [360], "c": [10], "n": [2], "V": [3000,3200], "temp_list": [75,80], "M": [900000]}],
      selectedValue:{

      },
      selectedValue1: {
        M:900000,
        aw:null,
        E:7000,
        T:360,
        V:3000,
        c:10,
        c_in:10,
        k:75000000,
        n:2,
        p:0.5,
        t_one:640,
        temp_list:75,
        v_in:20,
      },
      isSwitchOn: {},
      show_map: false,
      Ur_generation: [],
      NOx_generation: [],
      Nitric_acid_concentration: [],
      diffTempAcid: [],
      diffTempUranium: [],
      UrTo_standardTime:[],

      dialogFormVisible: true,
      form: {},
      config: {
        model: "单一容器模型",
        parameter:
            "向后预测单位:{12]}:季节性周期长度:{12];是否参数自动寻优:{是}\n",
        variate: "时间序列变量:{年度销量}\n",
      },
      caculateResult: {},
      caculate_info: {},
      noResult: false,
      waitFinished: false,
      errorText: "计算失败",
      waitTime: 0,
      param_table: [],
      isRevolve: false,
      file_path: "-1",
      id: "-1",
      username: "",
      totalResult: [],
      purposeNumber:[],
      Legend:[],
      Argument: "",
      requestExcel:"",
      variable:null,
      E_params:{},
      nullKey:null
    };
  },
  created() {
    if(this.selected_row._id){
      console.log("this.selected_row",this.selected_row._id)
      this.id = this.selected_row._id ;
      localStorage.setItem("selected_cal_id",this.selected_row._id)
      return
    }else if(localStorage.getItem("selected_cal_id")!==undefined){
      this.id = localStorage.getItem("selected_cal_id") ;
    }else{
      this.$message.error("获取记录错误")
      this.errorText = "参数获取错误";
      this.noResult = true;
    }
  },
  mounted() {
    // 在组件挂载后开始计时
    this.startTimer();
    this.username = localStorage.getItem("username");
    if(this.selected_row._id){
      this.id = this.selected_row._id ;
      localStorage.setItem("selected_cal_id",this.selected_row._id)
    }else if(localStorage.getItem("selected_cal_id")!==undefined){
      this.id = localStorage.getItem("selected_cal_id") ;
    }else{
      this.$message.error("获取记录错误")
      this.errorText = "参数获取错误";
      this.noResult = true;
    }
    console.log("this.selected_row._id", this.selected_row._id);
    this.request
        .post("/cal/checkCal_Byid", {
          id: this.id,
        })
        .then((res) => {
          if (res.code === 200) {
            this.GroupsOrOne = res.data[0].GroupsOrOne
            this.$message.success("查询成功");
            console.log("查询到的历史记录-------------------------->\n");
            console.log(res);
            this.caculateResult = res.data[0].output;   //单组图用到的输出
            this.totalResult = res.data[0];             //多组图用到的输出
            this.jsonData = res.data[0].initial_params;
            this.caculate_info._id = res.data[0]._id;
            this.caculate_info.model_name = res.data[0].model_name;
            this.caculate_info.model_type = res.data[0].model_type;
            this.caculate_info.save_time = res.data[0].save_time;
            this.caculate_info.GroupsOrOne = res.data[0].GroupsOrOne;
            this.file_path = res.data[0].file_path;

            console.log("------------------------>打印VtableDta\n");
            console.log(this.VtableData);
            if (res.data[0].model_type === "回转分区") {
              this.isRevolve = true;
            }
            // console.log(this.caculate_info.paramValues = res.data[0].model_ParaKey);
            // this.caculate_info.paramValues = res.data[0].model_ParaKey;
            if (res.data[0].GroupsOrOne === "单组计算") {
              this.caculate_info.paramValues = res.data[0].initial_params;
            } else {
              this.VtableData = Object.keys(this.jsonData[0]).map((key) => {
                return {
                  attribute: key,
                  values: this.jsonData[0][key],
                };
              });
              this.caculate_info.paramValues = res.data[0].initial_params[0];
            }
            for (const key in this.caculate_info.paramValues) {
              if (
                  Object.prototype.hasOwnProperty.call(
                      this.caculate_info.paramValues,
                      key,
                  )
              ) {
                this.param_table.push({
                  parameter: key,
                  inputValue: this.caculate_info.paramValues[key],
                });
              }
            }
            this.waitFinished = true;
          } else {
            this.noResult = true;
            this.$message.error(res.msg);
          }
        });

  },
  computed: {
    isReturnRes() {
      return this.caculateResult.length > 0;
    },
  },
  methods: {
    async getExcelFile(index){
      switch (index){
        case 0:
          this.requestExcel = "Ur_generation"
          break;
        case 1:
          this.requestExcel= "Nitric_acid_concentration"
          break;
        case 2:
          this.requestExcel= "NOx_generation"
          break;
        case 3:
          this.requestExcel= "diffTempUranium"
          break;
        case 4:
          this.requestExcel= "diffTempAcid"
          break;
        case 5:
          this.requestExcel = "UrTo_standardTime"
          break;
      }
      console.log('[this.params]',JSON.stringify([this.params]))
      const formData = new FormData();
      formData.append("id", this.caculate_info._id);
      formData.append("username", this.username);
      formData.append('table_name',this.requestExcel)
      formData.append('params',[this.jsonData])
      formData.append('variable',this.variable)
      const baseUrl = this.baseUrl;
      console.log(baseUrl);
      await fetch("" + baseUrl + "/download/exportExcel", {
        method: "POST",
        body: formData,
      })
          .then((response) => response.blob())
          .then((blob) => {
            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = this.requestExcel+dayjs().format("YYYYMMDDHHmmss")+ ".xlsx"
            link.click();
          })
          .catch((error) => {
            console.error("文件下载失败:", error);
          });



    },

    clickUpdata(index){
      this.resolve_compose = false
      this.activeIndex = index
      this.$nextTick(() => {
        this.resolve_compose = true
        console.log('成分表已更新');
      });
    },
    outputI() {
      console.log(this.IsSave);
    },
    validateData() {
      this.show_map = false;
      console.log("正在校验数据---------->");
      console.log(this.selectedValue);

      if (Object.keys(this.selectedValue).length !== this.VtableData.length) {
        // 长度不相同，提示用户
        alert("请保证一行开关打开，其余行下拉框被选定值");
      } else {
        let emptyCount = 0; // 记录空值的数量
        let nonEmptyCount = 0; // 记录非空值的数量
        for (const key in this.selectedValue) {
          if (this.selectedValue[key]===null) {
            // 如果某个值为空
            emptyCount++;
          } else {
            // 如果某个值非空
            nonEmptyCount++;
          }
        }
        // 检查条件：要么没有空值，要么只有一个空值，否则提示用户
        if (emptyCount === 1 && nonEmptyCount === this.VtableData.length - 1) {
          // this.$emit("setSelectedValue",this.selectedValue)
          this.getSelectedValue();
          console.log("Legend",this.Legend)
          this.FilterLine();
          console.log("校验数据成功！！！！！！！！！！");

          setTimeout(()=>{
            this.E_params = this.selectedValue
            for(let item in this.selectedValue){
              if(this.selectedValue[item] === null){
                this.nullKey = item
                console.log("重新赋值了nullKey",this.nullKey)
              }
            }
            if(this.nullKey!=null){
              console.log("this.jsondata[0]",this.jsonData[0])
              this.E_params[this.nullKey] = this.jsonData[0][this.nullKey]
            }
            console.log("this.E_params" ,this.E_params)

            // Object.keys(this.jsonData.params).map((key) => {
            //   this.E_params[key] = this.jsonData.params[key].param_value
            // })
          },500)

          setTimeout(() => {
            this.show_map = true;
            this.resolve_compose = true
          }, 200);

          // 符合条件，不需要提示用户
        } else {
          // 不符合条件，提示用户
          alert("请保证一行开关打开，其余行下拉框被选定值");
        }
      }
    },
    // 筛选显示
    FilterLine() {
      // this.show_map = true;
      this.NOx_generation = [];
      this.Nitric_acid_concentration = [];
      this.Ur_generation = [];
      this.diffTempAcid = [];
      this.diffTempUranium = [];
      this.UrTo_standardTime = [];
      this.ComposeGroup = [];
      // 遍历purposeNumber数组
      for (const index of this.purposeNumber) {
        const dataObject = this.totalResult.output[index];
        // 将数据添加到相应的数组中
        this.NOx_generation.push(dataObject.NOx_generation);
        this.Nitric_acid_concentration.push(
            dataObject.Nitric_acid_concentration,
        );
        this.Ur_generation.push(dataObject.Ur_generation);
        this.diffTempAcid.push(dataObject.diffTempAcid);
        this.diffTempUranium.push(dataObject.diffTempUranium);
        if(dataObject.UrTo_standardTime){
          this.UrTo_standardTime.push(dataObject.UrTo_standardTime)
        }
        this.ComposeGroup.push(dataObject.Compose);

      }
      // 输出结果
      console.log("NOx_generation:", this.NOx_generation);
      console.log("Nitric_acid_concentration:", this.Nitric_acid_concentration);
      console.log("Ur_generation:", this.Ur_generation);
      console.log("diffTempAcid:", this.diffTempAcid);
      // console.log(JSON.stringify(this.diffTempAcid))
      console.log("diffTempUranium:", this.diffTempUranium);
      console.log("UrTo_standardTime:", this.UrTo_standardTime);
      console.log("this.ComposeGroup:", this.ComposeGroup);

      // console.log(JSON.stringify(this.diffTempUranium))
    },
    getSelectedValue() {
      const purposeNumber = [];
      this.Legend = [];
      //      遍历model_ParaKey数组
      for (let i = 0; i < this.totalResult.model_ParaKey.length; i++) {
        const modelPara = this.totalResult.model_ParaKey[i];
        let isMatch = true;
        this.nullKey = null;
        // 遍历selectedValue对象的属性
        for (const key in this.selectedValue) {
          if(this.selectedValue[key] === null){
            this.nullKey = key
            this.Argument = key
            console.log("nullKey",this.nullKey)
          }
          if (
              this.selectedValue[key] !== null &&
              this.selectedValue[key] !== modelPara[key]
          ) {
            isMatch = false;
            break;
          }
        }
        // 如果所有属性匹配，则将序号保存到purposeNumber数组中
        if (isMatch) {
          purposeNumber.push(i);
          this.Legend.push(modelPara[this.nullKey])
        }
      }
      this.purposeNumber = purposeNumber;
      console.log('purposeNumber',purposeNumber);
      console.log("nullkey" ,this.nullKey)

    },
    handleSwitchChange(attribute) {
      // Close all other switches when one is opened
      for (const key in this.isSwitchOn) {
        if (key !== attribute) {
          this.isSwitchOn[key] = false;
        }
      }

      if (this.isSwitchOn[attribute]) {
        // Switch is turned on, clear the selected variable value
        this.selectedValue[attribute] = null;
      }
    },
    useParam() {
      // let historyparam = [...this.caculate_info]

      this.$emit("sethistoryparam", this.caculate_info);
      this.toPageCaculate();
    },
    async exportJson() {
      console.log("this.totalResult.file_path", this.totalResult.file_path);
      if(this.totalResult.file_path === 'null'){
        this.$message.error("计算结果文件未选择保存，不可导出");
        return;
      }
      const formData = new FormData();
      formData.append("id", this.id);
      formData.append("username", this.username);
      const baseUrl = this.baseUrl;
      console.log("baseUrl");
      console.log(baseUrl);
      await fetch("" + baseUrl + "/cal/getJsonFile", {
        method: "POST",
        body: formData,
      })
          .then((response) => response.blob())
          .then((blob) => {
            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download =
                this.id + "/" + dayjs().format("YYYY-MM-DD-HH:mm:ss") + ".json";
            link.click();
          })
          .catch((error) => {
            console.error("文件下载失败:", error);
          });
    },
    startTimer() {
      const interval = 1000; // 每隔1秒更新一次
      const maxWaitTime = 10; // 最大等待时间为10秒
      let currentWaitTime = 0;

      const timer = setInterval(() => {
        if (this.noResult || currentWaitTime >= maxWaitTime) {
          clearInterval(timer);
          this.waitFinished = true;
        } else {
          currentWaitTime++;
          this.waitTime = currentWaitTime;
        }
      }, interval);
    },

    toPageCaculate() {
      if (!this.isRevolve) {
        this.$router.push("/1/S_C");
        this.$emit("addtab", {
          title: "单一容器", // 页面标题
          route: "/1/S_C", // 路由
          selected: true, // 设置选中状态
        });
      }
      if (this.isRevolve) {
        this.$router.push("/1/R_C");
        this.$emit("addtab", {
          title: "回转分区", // 页面标题
          route: "/1/R_C", // 路由
          selected: true, // 设置选中状态
        });
      }
    },
    goBack() {
      // 使用Vue Router的go(-1)方法返回前一个历史记录
      // router.go(-1);
      this.$router.push("/1/c_h");
      this.$emit("addtab", {
        title: "计算记录", // 页面标题
        route: "/1/c_h", // 路由
        selected: true, // 设置选中状态
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.MaterialComposition{
  line-height: 50px;
}
.r_table{
  width: 50vw;
}
.result {
  height: 100vh;
}
.loading {
  width: 100%;
  height: 100vh;
  background-color: rgb(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.error {
  width: 100%;
  height: 100%;
  //background-color: rgba(241, 130, 130, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    display: flex;
    width: 20vw;
    //height: 50%;
  }
}
/*
loading的效果
*/

.total {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
  //padding-bottom: 100px;
  padding: 20px;
  background-color: white;
  font-size: 14px;
  font-weight: 500;
}

.spss {
  /*background-color: #F9F7F7;*/
}
.backbutton {
  color: white;
  width: 100px;
  height: 40px;
  font-size: 15px;
  border-radius: 15px;
  margin-top: 0px;
  margin-bottom: 5px;
  background-color: #3f72af;
}

.functionbutton {
  //margin-top: 5%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 50px;
  height: 100px;
  button {
    display: flex;
    border-radius: 4px;
    width: 80px;
    height: 30px;
    border: 1.2px solid #409eff;
  }
}

/*标题小矩形*/
.blue-rectangle {
  width: 10px;
  height: 30px;
  background-color: #409eff;
  margin-right: 10px;
}

.processcontent {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.stepscontent {
  //margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  width: 90%;

  div:last-child {
    width: 100%;
    padding: 10px 10px 60px 0;
    background-color: white;
    //border: 1px solid #DCDFE6;
    border-radius: 4px;
  }
  div {
    div {
      font-weight: 500;
      font-size: 14px;

      span {
        //color: #d65046;
        color: #409eff;

        font-weight: bold;
      }
    }
    div:not(:last-child) {
      margin-bottom: 20px;
    }
  }
}
.detailed_conclusions {
  .conclusioncontent:not(:nth-of-type(2)) {
    .titled1 {
      margin-top: 80px;
    }
  }
}
.conclusioncontent {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;

  .titled1:not(:first-of-type) {
    margin-top: 30px;
  }
}

.totaltitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.totaltitle1 {
  margin-top: 60px;
}

.title_1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.title_1 > img {
  width: 30px;
  margin-right: 10px;
}
.datafilename {
  width: 40vw;
  margin-left: 10px;
  //color: blue;
  //text-decoration: underline;
}
.algorithmconfigure {
  margin-left: 10px;
}
.analyzeresults {
  margin-left: 40px;
}
.arrow {
  display: flex;
  flex-direction: row;

  > div {
    margin-bottom: 10px;
  }
}
.arrow > img {
  text-align: left;
  width: 30px;
}

.sequencechart {
  display: flex;
  //width: 100%;

  justify-content: center;
  margin-top: 10px;
}


</style>
